<template>
  <div class="welcome-container">
    <div class="welcome-title">
      <div class="main-title">
        <span class="title-text main-color">教育信息采集，</span>
        <span class="title-text">值得您选择的低代码平台</span>
      </div>
      <div class="desc-title">
        <span class="desc-text">
          目前已与售价<span class="desc-text main-color">「40W」</span>
          的知名快开平台实现核心功能拉齐，我们的价格仅为其</span
        >
        <span class="desc-text main-color">1 / 15</span>
      </div>
    </div>
    <el-row type="flex" class="about-section">
      <el-tabs v-model="activeName" class="full-width">
        <el-tab-pane label="关于橙单" name="about">
          <el-row :gutter="16">
            <el-col :span="12">
              <div class="item-block" style="height: 155px">
                <span class="item-title">核心能力</span>
                <div class="item-list">
                  <div>
                    <span class="marker" />
                    代码生成工具，具备极强的前后端代码生成能力和代码交付质量，完整覆盖第三范式的所有场景。
                  </div>
                  <div>
                    <span class="marker" />
                    低代码组件，工作流 / 在线表单 / 统计打印 / 自定义API / 移动端 /
                    多租户，全部深度自研完整可控。
                  </div>
                  <div>
                    <span class="marker" />
                    弹性架构，组件支持动态插拔，可为「若依」等第三方框架快速集成完整的低代码能力。
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item-block" style="height: 155px">
                <span class="item-title">技术选型</span>
                <div class="item-list">
                  <div>
                    <span class="marker" />
                    前后端主流技术栈，Spring Boot / Spring Cloud / Element Plus / Vant / Uniapp。
                  </div>
                  <div>
                    <span class="marker" />
                    支持数据库，MySQL / Oracle / PostgreSQL / SQLServer / 达梦 / 人大金仓 /
                    OpenGauss。
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="16" style="margin-top: 16px">
            <el-col :span="12">
              <div class="item-block" style="height: 120px">
                <span class="item-title">产品质量</span>
                <div class="item-list">
                  <div>
                    <span class="marker" />
                    全部源码通过 SonarQube 最严格的扫描「0」警告，该标准近乎业内唯一。
                  </div>
                  <div>
                    <span class="marker" />
                    前端样式统一规范，后台代码质量高，无过度封装，BUG 少，对二次开发极为友好。
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item-block" style="height: 120px">
                <span class="item-title">商业授权</span>
                <div class="item-list">
                  <div>
                    <span class="marker" />
                    全部源码交付，无任何橙单 License 痕迹，永久免费升级，无项目数量限制。
                  </div>
                  <div>
                    <span class="marker" />
                    宽松的商业授权，无后续收费套路，只要不做低代码竞品，可随便使用和二次开发。
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="16" style="margin-top: 16px">
            <el-col :span="12">
              <div class="item-block" style="height: 120px">
                <span class="item-title">服务支持</span>
                <div class="item-list">
                  <div>
                    <span class="marker" />
                    付费用户微信群免费技术支持，消息回复及时耐心，所有用户均可对我们进行监督。
                  </div>
                  <div>
                    <span class="marker" />
                    文档完整详尽、结构清晰、图文并茂、美观且具备良好的阅读体验。
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item-block" style="height: 120px">
                <span class="item-title">我们的资源</span>
                <div class="item-list">
                  <div>
                    <span class="marker" />
                    免费代码生成
                    <a href="https://code.orangeforms.com" target="_blank"
                      >https://code.orangeforms.com</a
                    >
                  </div>
                  <div>
                    <span class="marker" />
                    线上技术文档
                    <a href="https://www.orangeforms.com" target="_blank"
                      >https://www.orangeforms.com</a
                    >
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="16" style="margin-top: 16px">
            <el-col :span="12">
              <el-row type="flex" justify="space-between">
                <img class="qrcode-img" height="110" src="@/assets/img/welcome2.png" alt="" />
                <img class="qrcode-img" height="110" src="@/assets/img/welcome3.png" alt="" />
                <img class="qrcode-img" height="110" src="@/assets/img/welcome1.png" alt="" />
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row type="flex" justify="end">
                <div class="qrcode-container">
                  <div class="qrcode">
                    <img class="qrcode-img" src="@/assets/img/devwx.png" alt="" />
                    <span class="icon-name">开发者微信</span>
                  </div>
                  <div class="qrcode">
                    <img class="qrcode-img" src="@/assets/img/demo-h5-qrcode.png" alt="" />
                    <span class="icon-name">移动端演示</span>
                  </div>
                </div>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="示例说明" name="cases">
          <p class="cases-description">
            <strong>在线表单，</strong>
            通过在线表单编辑器创建，配置并绑定菜单后即可生效，无代码修改，适用于相对简单的表单页面。
            <strong>路由表单，</strong>
            通过橙单生成器创建，可生成前后端代码，需编译后部署，适用于二次开发的复杂表单或业务逻辑。
          </p>
          <el-table class="content-table" :data="tableData" border stripe>
            <el-table-column prop="menuName" label="菜单目录" width="200" />
            <el-table-column prop="caseDesc" label="示例说明" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { MobileEntryController } from '@/api/mobile';

const activeName = ref('about');
const tableData = ref([
  {
    menuName: '在线表单表格',
    caseDesc:
      '在线表单数据列表页面的功能展示，其中包括不同的表格形式，典型的数据操作，以及完整的查询方式，如快速过滤、高级查询和模糊搜索等。',
  },
  {
    menuName: '在线表单脚本',
    caseDesc:
      '提供完整的在线表单前端脚本的编写示例，同时展示前端脚本在用户交互和数据处理等方面的逻辑处理能力。',
  },
  {
    menuName: '在线表单案例',
    caseDesc:
      '在线表单可以配置的典型业务场景，便于用户参考，我们也会根据用户的反馈持续增加更多的实用案例。',
  },
  {
    menuName: '在线表单工单',
    caseDesc:
      '在线表单工作流的工单示例，创建工单即可新增业务数据，同时也会发起审批流程，是比较典型的工作流应用场景之一。',
  },
  {
    menuName: '在线表单统计',
    caseDesc: '在线拖拉拽统计页面，同时可以分配个角色，用于用户登录后的工作台门户页面。',
  },
  {
    menuName: '路由表单示例',
    caseDesc:
      '路由表单页面可基于橙单代码生成工具拖拉拽后快速生成，提供完整的前后端源码，80%以上的复杂功能均可通过配置后生成，剩余的个性化逻辑，手动二开后即可快速交付。',
  },
  {
    menuName: '路由表单工单',
    caseDesc:
      '路由表单工作流的工单示例，创建工单即可新增业务数据，同时也会发起审批流程，是比较典型的工作流应用场景之一。相比于在线表单工单，具备更好的自定义开发能力。',
  },
  {
    menuName: '路由表单统计',
    caseDesc:
      '路由表单统计页面可基于橙单代码生成工具拖拉拽后快速生成，提供完整的前后端源码，80%以上的复杂统计功能均可通过配置后生成，剩余的个性化逻辑，手动二开后即可快速交付。',
  },
]);

const mainContextHeight = inject('mainContextHeight', ref(200));
const getContentStyle = computed(() => {
  return [{ 'min-height': mainContextHeight.value - 221 - 24 - 16 + 'px' }];
});
</script>

<style lang="scss" scoped>
.welcome-container {
  font-size: 14px !important;
  background-color: white;
}

.welcome-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 140px;
  padding-left: 30px;
  background: #ffffff;
  background-image: url('@/assets/img/banner.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;

  .main-title {
    margin-bottom: 15px;
    .title-text {
      color: #333333;
      font-size: 32px;
      font-weight: 550;
      &.main-color {
        color: $color-primary;
      }
    }
  }

  .desc-title {
    .desc-text {
      color: #333333;
      font-size: 16px;
      font-weight: 550;
      &.main-color {
        color: $color-primary;
        margin-left: 6px;
      }
    }
  }
}

.title-img {
  height: 100%;
}

.about-section {
  padding: 8px 30px 0 30px;
  color: #333;

  :deep(.el-tabs) {
    --el-tabs-header-height: 45px;

    .el-tabs__header {
      margin-bottom: 24px !important;
    }

    .el-tabs__nav-wrap::after {
      background-color: #ffffff;
    }
  }
}

.full-width {
  width: 100%;
}

.item-block {
  padding: 16px 5px 16px 18px;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  transition: 0.2s;

  &.no-right-border {
    border-right: 0;
  }

  &.no-bottom-border {
    border-bottom: 0;
  }
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 5px;
}

.item-list {
  padding-top: 14px;
  margin: 0 0 0 2px;

  div {
    margin: 0 0 14px 0;
    color: #333333;
    display: flex;
    align-items: center;

    .marker {
      width: 8px;
      height: 8px;
      background-color: #333333;
      border-radius: 50%;
      margin-right: 7px;
    }
  }

  a {
    margin-left: 6px;
  }
}

.resources-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;

  .section-item {
    display: flex;
    align-items: center;
    height: 113px;

    .section-item-left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 188px;
      height: 100%;
      background-image: url('@/assets/img/authorize.png');
      background-size: 100% 100%;
      color: #ffffff;
      font-size: 26px;
      font-weight: 550;
    }

    .section-item-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 290px;
      height: 100%;
      border-top: 1px solid #ebebeb;
      border-bottom: 1px solid #ebebeb;
      border-right: 1px solid #ebebeb;

      span {
        color: #333333;
        font-size: 13px;

        .price-text {
          color: #fd4444;
          font-size: 24px;
          font-weight: 550;
        }
      }
    }
  }
}

.qrcode-container {
  display: inherit;
}

.qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 40px;

  .qrcode-img {
    height: 120px;
    display: block;
    margin-bottom: 5px;
  }

  .icon-name {
    font-size: 13px;
    color: #333333;
  }
}

.cases-description {
  margin-bottom: 16px;
}

.cases-tabs {
  display: flex;
  padding: 0;
}

.cases-content {
  padding: 20px;

  .sub-title {
    font-size: 14px;
    color: #333;
  }
}

:deep(.el-collapse) {
  border: none;
}

:deep(.el-divider--horizontal) {
  margin: 0;
}

:deep(.el-tag) {
  padding: 0 30px;
}

:deep(.el-table) {
  th {
    background-color: #f6f7f9 !important;

    .cell {
      font-size: 14px !important;
      color: #333 !important;
      font-weight: bold !important;
    }
  }

  tr {
    height: 60px;
  }

  tr.el-table__row--striped td {
    background: #f8f9fc !important;
  }
}

.content-table {
  :deep(.cell) {
    font-size: 14px !important;
  }
}
</style>
